<template>
  <div class="finddetail" ref="find" v-if="detaildata">
    <van-nav-bar fixed style="z-index:99">
      <template #left>
        <i
          class="iconfont icon-fanhui"
          style="font-size: 20px; font-weight: 600"
          @click="$router.back()"
        ></i>
      </template>
      <template #title>
        <span v-if="id != 0" style="font-size: 20px; font-weight: 600">{{
          title
        }}</span>
        <span v-if="id == 0" style="font-size: 20px; font-weight: 600"
          >全部作品</span
        >
      </template>
    </van-nav-bar>
    <div class="selectorbox" v-if="screenShow">
      <div class="selector">
        <div class="item" :class="{active:indexs==0}" @click="selectitem($event, id,0)">
          <p>全部</p>
        </div>
        <div
          class="item"
          :class="{active:indexs==index+1}"
          @click="selectitem($event, i.value ? i.value : i.id,index+1)"
          v-for="(i, index) in id == 0 ? allnav : navlist"
          :key="index"
        >
          <p>{{ id == 0 ? i.category_name : i.title }}</p>
        </div>
        <div class="btn">
          <i @click="screenShow = false" class="iconfont icon-fenlei"></i>
        </div>
      </div>
    </div>
    <transition
      name="fade"
      enter-active-class="animated fadeInDown"
      leave-active-class="animated fadeOutUp"
    >
      <div class="screen" v-if="!screenShow">
        <div class="head">
          <span>筛选</span>
          <i @click="screenShow = true" class="iconfont icon-shanchu"></i>
        </div>
        <div class="body">
          <div class="item" :class="{active:indexs==0}" @click="selectitem($event, id,0)">
            <p>全部</p>
          </div>
          <div
            class="item"
            :class="{active:indexs==index+1}"
            @click="selectitem($event, i.value ? i.value : i.id,index+1)"
            v-for="(i, index) in id == 0 ? allnav : navlist"
            :key="index"
          >
            <p>{{ id == 0 ? i.category_name : i.title }}</p>
          </div>
        </div>
      </div></transition
    >
    <div class="cardbox" v-if="detaildata.list">
      <FinddeItem :list="detaildata.list"></FinddeItem>
    </div>
    <MyLoading v-else></MyLoading>
  </div>
  <MyLoading v-else></MyLoading>
</template>

<script>
import Vue from "vue";
import { NavBar } from "vant";
import FinddeItem from "@/components/FinddeItem.vue";
import MyLoading from "@/components/MyLoading.vue";
import { mapState } from "vuex";
Vue.use(NavBar);
export default {
  data() {
    return {
      detaildata: {},
      title: null,
      navlist: [],
      screenShow: true,
      id: null,
      indexs:0,
    };
  },
  components: {
    FinddeItem,
    MyLoading
  },
  created() {
    if(this.$route.params.hot){
      this.title = this.$route.params.hot
    }
    this.detaildata = {};
    this.id = this.$route.query.id;
    this.axios
      .get("https://apis.netstart.cn/xpc/articles?category_id=" + this.id)
      .then((res) => {
        this.detaildata = res.data.data;
        if (this.detaildata.header) {
          this.detaildata.header.categories.forEach((e) => {
            if (e.value == this.$route.query.id) {
              this.title = e.title;
              this.navlist = e.sub;
            }
          });
        }
      });
    setTimeout(() => {
    }, 500);
  },
  methods: {
    selectitem(e, id,index) {
      this.screenShow = true
      this.indexs = index
      console.log(index);
      this.detaildata = {};
      this.axios
        .get("https://apis.netstart.cn/xpc/articles?category_id=" + id)
        .then((res) => {
          this.detaildata = res.data.data;
        });
      this.$refs.find.querySelectorAll(".item").forEach((e) => {
        e.classList.remove("active");
      });
      e.target.parentNode.classList.add("active");
    },
  },
  computed: {
    ...mapState(["allnav"]),
  },
};
</script>

<style lang="less" scoped>
.finddetail {
  width: 100vw;
  height: 100%;
  background-color: #fff;
  padding-top: 90px;
  .cardbox {
    width: 100%;
    padding: 0 20px;
  }
  .selectorbox {
    width: 100%;
    position: fixed;
    top: 46px;
    left: 0;
    z-index: 10;
    .selector {
      height: 50px;
      display: flex;
      align-items: center;
      padding-left: 20px;
      background-color: #fff;
      padding-right: 56px;
      flex-wrap: nowrap;
      overflow-x: scroll;
      border-bottom: 1px solid #f7f7f7;
      &::-webkit-scrollbar {
        display: none;
      }
      .btn {
        width: 70px;
        height: 50px;
        background-image: linear-gradient(to right, transparent 0%, white 20%);
        position: absolute;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        i {
          font-size: 26px;
        }
      }
      .item {
        flex: 1;
        font-size: 12px;
        p {
          padding: 7px 15px;
          white-space: nowrap;
          margin-right: 10px;
          border-radius: 4px;
          background-color: #efefef;
          color: #aaa;
        }
        &.active {
          p {
            color: rgb(231, 78, 78);
          }
        }
      }
    }
  }
  .screen {
    width: 100vw;
    height: 200vw;
    position: fixed;
    top: 46px;
    left: 0;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.4);
    .head {
      height: 50px;
      display: flex;
      align-items: center;
      padding: 0 20px;
      background-color: #fff;
      justify-content: space-between;
      color: #444;
      border-bottom: 1px solid #f7f7f7;
      span {
        font-size: 15px;
        font-weight: 600;
      }
      i {
        font-weight: 600;
      }
    }
    .body {
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
      width: 100vw;
      justify-content: flex-start;
      background-color: #fff;
      .item {
        font-size: 12px;
        margin-bottom: 10px;
        p {
          display: inline-block;
          padding: 7px 15px;
          white-space: nowrap;
          margin-right: 10px;
          border-radius: 4px;
          background-color: #efefef;
          color: #aaa;
        }
        &.active {
          p {
            color: rgb(231, 78, 78);
          }
        }
      }
    }
  }
  .animated {
    animation-duration: 0.3s;
  }
}
</style>